<template>
  <div style="height: 100%; width: 100%; position: relative">
    <div class="pagetop">
      <table style="width: 100%; font-size: 12px" border="0">
        <col style="width: 5%" />
        <col style="width: 10%" />
        <col style="width: 5%" />
        <col style="width: 10%" />
        <col style="width: 10%" />
        <col style="width: 5%" />
        <col style="width: 5%" />
        <col style="width: 10%" />
        <col style="width: 5%" />
        <col style="width: 10%" />
        <col style="width: 3%" />
        <col style="width: 30%" />

        <tr>
          <td align="right">表名</td>
          <td>
            <el-input size="small" v-model="sel_tbname"></el-input>
          </td>
          <td align="right">索引名</td>
          <td>
            <el-input size="small" v-model="sel_idxname"></el-input>
          </td>
          <td align="center">
            <el-checkbox v-model="sel_issystem" true-label="1" false-label="0">查看非程序内置索引</el-checkbox>
          </td>
          <td align="center">
            <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="btnQuery">查询</el-button>
          </td>
          <td align="left">
            <!-- <el-button icon="el-icon-search" @click="btndefectQuery">查找缺失索引</el-button> -->
          </td>

          <td align="center">
            <el-radio v-model="sel_reorganize" :label="1">重新组织</el-radio>
          </td>
          <td>
            <el-button icon="el-icon-edit" type="primary" @click="btnRepair">修复选中的索引</el-button>
          </td>
          <td align="right">更新统计信息采样率：</td>
          <td>
            <el-input size="small" v-model="sel_samrate" @focus="Focus($event)" placeholder="默认"></el-input>
          </td>
          <td text-align="left">
            <el-button icon="el-icon-edit" @click="btnUpdate">更新统计信息</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="pagecenter">
      <vxe-table ref="mainTable" :data.sync="mainTableData" :loading="mainLoading" height="auto" border size="mini"
        :sort-config="{ trigger: 'cell' }" resizable stripe highlight-current-row header-align="center" show-overflow
        :cell-class-name="cellClassName">
        <vxe-table-column type="selection" width="40" align="center"></vxe-table-column>
        <!-- <vxe-table-column type="index" title="NO." width="50" align="center"></vxe-table-column> -->
        <vxe-table-column field="tbname" title=" 表名" width="150" sortable></vxe-table-column>
        <vxe-table-column field="idxname" title="索引名" width="200" sortable></vxe-table-column>

        <vxe-table-column field="avg_percent" title="碎片百分比" width="180" header-align="center" align="left" sortable>
          <template v-slot="{ row }">
            <el-progress :text-inside="true" :stroke-width="20" :percentage="row.avg_percent"
              :color="customColorMethod"></el-progress>
          </template>
        </vxe-table-column>

        <vxe-table-column field="idxsize" title="占用空间(MB)" width="180" header-align="center" align="left" sortable>
          <template v-slot="{ row }">
            <el-progress :text-inside="true" :stroke-width="20" :percentage="custompercentageMethod(row)"
              :format="format1" :formatObj="{ row }"> </el-progress>
          </template>
        </vxe-table-column>

        <vxe-table-column field="last_updated" title="统计信息更新时间" width="130" align="center"></vxe-table-column>
        <vxe-table-column field="modification_counter" title="更新后修改" header-align="center" width="95"></vxe-table-column>
        <vxe-table-column field="colsname" title="包含列" width="350"></vxe-table-column>
        <vxe-table-column field="idx_type" title="索引类型" width="80" :formatter="format"></vxe-table-column>
        <vxe-table-column field="issystem" title="程序内置" width="75" align="center" :formatter="format"></vxe-table-column>
        <vxe-table-column field="object_id" title="ObjectId" width="100" header-align="center"
          align="right"></vxe-table-column>
        <vxe-table-column field="index_id" title="IndexId" width="100" header-align="center"
          align="right"></vxe-table-column>
      </vxe-table>
    </div>

    <el-dialog title="缺失索引如下：" :visible.sync="msgdialog" width="20%" style="overflow: hidden !important">
      <div style="height: 300px; overflow-y: scroll">
        <div v-html="showmsg"></div>
      </div>
      <div style="text-align: center">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="btndefectQuery">刷 新</el-button>
          <el-button @click="msgdialog = false">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>


<script type = "text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "MNG192",
  data() {
    return {
      sel_tbname: "",
      sel_idxname: "",
      sel_issystem: 0,
      sel_reorganize: 1,
      sel_samrate: "",
      mainTableData: [],
      mainLoading: false,
      msgdialog: false,
      showmsg: "",
    };
  },
  created() {
    //this.InitPage();
    //this.btnQuery();
  },
  methods: {
    initData() {
      this.mainTableData = [];
      this.mainLoading = true;
      this.$tool
        .request({
          url: "MNG/MNG1/MNG192",
          method: "post",
          timeout: 600000,
          data: {
            action: "QueryData",
            tbname: this.sel_tbname,
            indexname: this.sel_idxname,
            issystem: this.sel_issystem,
          },
        })
        .then((res) => {
          this.mainTableData = res.data;
          this.mainLoading = false;
        })
        .catch((e) => {
          this.$alert(e, "error");
          this.mainLoading = false;
        });
    },
    btnQuery() {
      // 查询
      this.initData();
    },
    btndefectQuery() {
      this.showmsg = "";
      // 查询缺失索引
      this.$tool
        .request({
          url: "MNG/MNG1/MNG192",
          method: "post",
          timeout: 600000,
          data: {
            action: "QueryDefectIndexData",
          },
        })
        .then((res) => {
          this.msgdialog = true;
          let reg = new RegExp("\n", "g");
          let str = res.defectindex.replace(reg, "<br>");
          this.showmsg = str;
        })
        .catch((e) => {
          this.$alert(e, "error");
        });
    },
    btnRepair() {
      // 修复选中的索引
      let seldata = this.$refs.mainTable.getSelectRecords();
      this.mainLoading = true;
      var errormsg = "";
      if (seldata.length > 0) {
        seldata.forEach((element) => {
          this.$tool
            .request({
              url: "MNG/MNG1/MNG192",
              method: "post",
              timeout: 600000,
              data: {
                action: "RepairIndexData",
                datalist: seldata,
                indexdata: element,
              },
            })
            .then((res) => {
              if (res.errcode != "1") {
                errormsg += element.indexname + ",";
              }
              // 执行查询
            })
            .catch((e) => {
              errormsg += element.indexname + ",";
            });
        });

        if (errormsg != "") {
          this.$alert("以下索引修复失败：" + errormsg);
        } else {
          this.$alert("修复索引完成！");
        }

        this.mainLoading = false;
        this.initData();
      } else {
        this.$message.error("未勾选数据！");
        this.mainLoading = false;
      }
    },
    btnUpdate() {
      // 更新统计信息
      let seldata = this.$refs.mainTable.getSelectRecords();
      if (seldata.length > 0) {
        this.mainLoading = true;
        var errormsg = "";

        seldata.forEach((element) => {
          this.$tool
            .request({
              url: "MNG/MNG1/MNG192",
              method: "post",
              timeout: 600000,
              data: {
                action: "UpdateIndexData",
                datalist: seldata,
                indexdata: element,
                samrate: this.sel_samrate,
              },
            })
            .then((res) => {
              if (res.errcode != "1") {
                errormsg += element.indexname + ",";
              }
              // 执行查询
            })
            .catch((e) => {
              errormsg += element.indexname + ",";
            });
        });
        if (errormsg != "") {
          this.$alert("以下索引更新统计信息失败：" + errormsg);
        } else {
          this.$alert("更新统计信息完成！");
        }

        this.mainLoading = false;
        this.initData();
      } else {
        this.$message.error("未勾选数据！");
        this.mainLoading = false;
      }

      // this.mainLoading = true;
      // if (seldata.length > 0) {
      //     this.$tool
      //         .request({
      //             url: "MNG/MNG1/MNG192",
      //             method: "post",
      //             timeout: 600000,
      //             data: {
      //                 action: "UpdateIndexData",
      //                 datalist: seldata,
      //                 samrate: this.sel_samrate,
      //             },
      //         })
      //         .then((res) => {
      //             this.$alert(res.errmsg);
      //             // 执行查询
      //             this.initData();
      //         })
      //         .catch((e) => {
      //             this.$alert(e, "error");
      //             this.mainLoading = false;
      //         });
      // } else {
      //     this.$message.error("未勾选数据！");
      //     this.mainLoading = false;
      // }
    },
    format({ cellValue, row, column }) {
      if (column.property == "idx_type") {
        if (row.idx_type == "1") {
          return "聚集索引";
        } else if (row.idx_type == "2") {
          return "非聚集索引";
        } else {
          return row.idx_type;
        }
      }

      if (column.property == "issystem") {
        if (row.issystem == "0") {
          return "否";
        } else if (row.issystem == "1") {
          return "是";
        } else {
          return row.issystem;
        }
      }
    },
    format1(percentage, obj) {
      var size = obj.row.idxsize;

      if (size > 100) {
        return `${size}`;
      } else {
        return `${percentage}`;
      }
    },

    custompercentageMethod(row) {
      if (row.idxsize < 100) {
        return row.idxsize;
      } else {
        return 100;
      }
    },

    customColorMethod(percentage) {
      if (percentage < 25) {
        return "#67C23A";
      } else if (percentage < 50) {
        return "#409EFF";
      } else if (percentage < 75) {
        return "#e6a23c";
      } else if (percentage < 100) {
        return "#ff6600";
      } else {
        return "#ff0000";
      }
    },

    cellClassName({ row, column }) {
      if (column.property == "tbname" || column.property == "idxname") {
        if (row.issystem == "0") return "disabled-cell";
      }
    },
  },
};
</script>
<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.search-title {
  margin: 0 5px 0 20px;
  font-size: 12px;
}

.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}

::v-deep .disabled-cell {
  color: rgb(252, 6, 6);
}

.el-progress {
  line-height: 25px !important;
}

.progressclass {
  width: 90% !important;
}

.divclass {
  text-align: center;
  background-color: #409eff;
  position: relative;
  border-radius: 100px;
  height: 20px;
  line-height: 20px;
}</style>
